<template>
	<view class="wrap">
		<template v-if="isHasDataFlag">
			<template v-if="loreTypeName == '知识讲解'">
				<!-- 视频讲解 -->
				<view class="zsjj zeroBot">
					<video id="myVideo" class="video"
						autoplay
						:src="sourceDetail"
					></video>
				</view>
			</template>
			<template v-else>
				<view class="tips">
					<text class="iconfont icon-notice"></text>
					<text>{{sourceTips}}</text>
				</view>
				<view class="modWrap">
					<block
						v-for="(item,i) in list"
						:key="i"
					>
						<template v-if="loreTypeName == '点拨指导'">
							<block v-if="i==0">
								<view class="modItem">
									<view class="modTit">
										<view class="lineView"></view>
										<view>{{item.loreType}}</view>
									</view>
									<view class="modCon">
										<view class="innerCon">
											<view class="conItem">
												<view class="conTit">标题:</view>
												<view>{{item.lqsTitle}}</view>
											</view>
											<view class="conItem">
												<view class="conTit">内容:</view>
												<view class="detCon"><rich-text :nodes="formatImgRichText(formatContent(item.lqsContent))"></rich-text></view>
											</view>
										</view>
									</view>
								</view>
							</block>
							<block v-else>
								<template v-if="list[i-1].loreType == list[i].loreType">
									<view class="modItem spec">
										<view class="modCon">
											<view class="innerCon">
												<view class="conItem">
													<view class="conTit">标题:</view>
													<view>{{item.lqsTitle}}</view>
												</view>
												<view class="conItem">
													<view class="conTit">内容:</view>
													<view class="detCon"><rich-text :nodes="formatImgRichText(formatContent(item.lqsContent))"></rich-text></view>
												</view>
											</view>
										</view>
									</view>
								</template>
								<template v-else>
									<view class="modItem">
										<view class="modTit">
											<view class="lineView"></view>
											<view>{{item.loreType}}</view>
										</view>
										<view class="modCon">
											<view class="innerCon">
												<view class="conItem">
													<view class="conTit">标题:</view>
													<view>{{item.lqsTitle}}</view>
												</view>
												<view class="conItem">
													<view class="conTit">内容:</view>
													<view class="detCon"><rich-text :nodes="formatImgRichText(formatContent(item.lqsContent))"></rich-text></view>
												</view>
											</view>
										</view>
									</view>
								</template>
							</block>
						</template>
						<template v-if="loreTypeName == '知识清单'">
							<view class="modItem">
								<view class="modTit">
									<view class="lineView"></view>
									<view>{{item.loreType}}{{i+1}}</view>
								</view>
								<view class="modCon">
									<view class="innerCon">
										<view class="conItem">
											<view class="conTit">标题:</view>
											<view>{{item.lqsTitle}}</view>
										</view>
										<view class="conItem">
											<view class="conTit">内容:</view>
											<view class="detCon">
												<rich-text :nodes="formatImgRichText(formatContent(item.lqsContent))"></rich-text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</template>
						<template v-if="loreTypeName == '解题示范'">
							<view class="modItem">
								<view class="modTit">
									<view class="lineView"></view>
									<view>{{item.queTitle}}</view>
								</view>
								<view class="modCon">
									<view class="innerCon">
										<view class="conItemJt">
											<view class="conTit">题干:</view>
											<view><rich-text :nodes="formatImgRichText(formatContent(item.queSub))"></rich-text></view>
										</view>
										<view class="conItemJt">
											<view class="conTit">答案:</view>
											<view><rich-text :nodes="formatImgRichText(formatContent(item.queAnswer))"></rich-text></view>
										</view>
										<view class="conItemJt">
											<view class="conTit">解析:</view>
											<view><rich-text :nodes="formatImgRichText(formatContent(item.queResolution))"></rich-text></view>
										</view>
									</view>
								</view>
							</view>
						</template>
					</block>
				</view>
			</template>
		</template>
		<template v-else-if="isHasDataFlag == false">
			<no-data></no-data>
		</template>
	</view>
</template>

<script>
	import { getSourceDetail } from '@/api/zhuxue'
	export default {
		data(){
			return{
				sourceDetail:'',
				url:'',
				loreId:'',
				loreTypeName:'',
				isHasDataFlag:null,
				sourceTips:'',
				list:[]
			}
		},
		onLoad(options){
			this.loreId = options.loreId;
			this.loreTypeName = options.loreTypeName == '视频讲解' ? '知识讲解' : options.loreTypeName;
			if(this.loreTypeName == '点拨指导'){
				this.sourceTips = '重点、难点、关键点、易混点,认真掌握每一点';
			}else if(this.loreTypeName == '知识清单'){
				this.sourceTips = '本节知识点需要背诵的内容';
			}else{
				this.sourceTips = '学习解题方法,规范解题步骤';
			}
			setTimeout(()=>{
				uni.setNavigationBarTitle({
					title:this.loreTypeName
				})
			},100)
			this.loadSourceDet();
		},
		computed:{
			formatContent(){
				return function(content){
					if(content != undefined ){
						var reg = new RegExp("Module/", "g");
						if(content.indexOf('Module/') != -1){
							return content.replace(reg, this.zhuXueServer + '/Module/');
						}else{
							return content;
						}
					}
				}
			},
			//设置img宽度
			formatImgRichText(){
				return function(content){
					if(content != undefined ){
						var reg = new RegExp("<img", "g");
						if(content.indexOf('<img') != -1){
							return content.replace(reg, '<img style="max-width:100%;height:auto;display:block"')
						}else{
							return content
						}
					}
				}
			}
		},
		methods:{
			loadSourceDet(){
				var field = { account:uni.getStorageSync('token'),loreTypeName:this.loreTypeName,loreId:this.loreId };
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				getSourceDetail({content:contentStr}).then(res=>{
					this.isHasDataFlag = true;
					if(this.loreTypeName == '知识讲解'){
						this.sourceDetail = this.zhuXueServer + '/' + res.data.datas.sourceDetail;
					}else{
						this.list = res.data.datas.sourceDetailList;
					}
				}).catch(err=>{console.log(err);this.isHasDataFlag = false});
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang="scss" scoped>
	@import '@/static/scss/mapDet.scss';
	.wrap{
		/* #ifdef APP-PLUS */
			margin-top: 100rpx;
		/* #endif */
		/* #ifdef H5 */
		margin-top: 20rpx;
		/* #endif */
		padding-bottom: 20rpx;
	}
</style>